<template>
  <section class="rela_analyse" @click="closeContextmenu">
    <div class="echart_analyse">
      <echarts-base
        @contextmenu="contextmenu"
        @clickEcharts="clickEcharts"
        :resize="index_resize"
        v-if="echart_analyse"
        :idName="idName"
        :option="option2"
      ></echarts-base>
    </div>
    <el-dialog
      class
      title="身份证查找"
      width="400px"
      :visible.sync="showSFZ_Dialog"
      v-if="showSFZ_Dialog"
    >
      <!--查身份证-->
      <dialog-sfz @sure_submit="sure_submit"></dialog-sfz>
    </el-dialog>
    <el-dialog
      class
      :title="dialogUserTitle"
      width="1240px"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
    >
      <!--点击线，查看信息-->
      <dialog-analyse :analyse="analyse"></dialog-analyse>
    </el-dialog>
    <div class="contextmenu-div" id="contextmenuDiv_anal" v-show="contextmenu_div">
      <ul>
        <li @click="showInfo">查看基本信息</li>
        <li @click="showRelation">自由拓展</li>
        <li @click="showSFZ">查找二次关系</li>
        <li @click="superFile()">查看详细信息</li>
      </ul>
    </div>
    <div class="person_info_div">
      <div
        :id="'idNum_'+item.sfzh"
        class="person_info_div_item"
        v-for="(item,index) in personInfo"
        :key="index"
      >
        <img class="close_png" src="../assets/imgs/tupu09.png" @click="closeInfo(index)">
        <p style="text-align: center;background: #fff;">
          <img @error="pic($event)" :src="item.img_url">
        </p>
        <p v-show="item.xm">姓名：{{item.xm}}</p>
        <p
          v-show="item.csrq"
        >性别 : {{item.xb}}&nbsp;&nbsp;&nbsp;&nbsp;婚姻 : {{item.hyzk}}&nbsp;&nbsp;&nbsp;&nbsp;年龄 : {{item.csrq}}</p>
        <p v-show="item.whcd">文化程度：{{item.whcd}}</p>
        <p>身份证号：{{item.gmsfhm}}</p>
        <p v-show="item.hkszd">户口所在地 : {{item.hkszd}}</p>
        <p v-show="item.xz">住址详址 : {{item.xz}}</p>
        <!--<p class="super" @click="superFile(item.sfzh)">跳到到超级档案</p>-->
      </div>
    </div>
  </section>
</template>

<script>
import echartsBase from "@/components/echars_base";
import dialogAnalyse from "@/components/dialogAnalyse";
import dialogSfz from "@/components/dialogSfz";
import { option3 } from "@/components/common";
import star from "@/assets/imgs/tupu73.png";
import moren_pic from "@/assets/imgs/user.png";
import {
  gotoSuperFile,
  apiShowInfo,
  apiShowRelation,
  apiSeachAnalyse,
  apiClickEdge,
  getURLinfo,
  apiSearchSFZ
} from "@/components/api";
export default {
  props: {
    searchInput: {
      type: String,
      default: ""
    },
    res: Object,
    analyse_change: {
      type: Boolean,
      default: false
    }
  },
  components: {
    echartsBase,
    dialogAnalyse,
    dialogSfz
  },
  data() {
    return {
      type: "analyse",
      personInfo: [],
      echart_analyse: false,
      idName: "echarts_analyse",
      index_resize: { height: 800, width: 800 },
      dialogUserTitle: "详情",
      contextmenu_div: false,
      isShowInfo: false,
      showSFZ_Dialog: false,
      menu_item: {},
      dialogTableVisible: false,
      option: {},
      option2: option3,
      canvas: "",
      contex: "",
      radius: "",
      diameter: "",
      star: star,
      moren_pic: moren_pic,
      ImgObj: "",
      ImgObj2: "",
      analyse: {
        firstTable: {
          firstName: "",
          firstSFZ: "",
          gxzs: 0,
          secName: "",
          secSFZ: ""
        },
        tableData1: [],
        tableLable1: {
          rele_type: "关系分数",
          rele_num: "次数",
          rele_name: "关系名称"
        },
        table3: [
          {
            name: "",
            myself: "",
            tableData3: [],
            tableLable3: {}
          }
        ]
      }
    };
  },
  methods: {
    pic(ev) {
      ev.target.src = moren_pic;
    },
    showInfo() {
      /*查看信息*/
      if (this.menu_item.dataType != "node") {
        return;
      }
      let sfzName =
        this.menu_item.data.zjhm.indexOf("$weiyi_") != -1
          ? this.menu_item.data.zjhm.substring(
              0,
              this.menu_item.data.zjhm.indexOf("$weiyi_")
            )
          : this.menu_item.data.zjhm;
      let isApi = true;
      this.personInfo.map(item => {
        if (item.sfzh == String(sfzName)) {
          isApi = false;
          return;
        }
      });
      if (isApi) {
        apiShowInfo(this, this.menu_item);
      }

      this.contextmenu_div = false;
    },
    clickEcharts(val) {
      /*点击线*/
      if (val.dataType != "edge") {
        return;
      }
      if (val.data.code == 0 || val.data.ids == 0) {
        return;
      } /*没有这俩个条件，查不到的*/
      this.dialogTableVisible = true;
      apiClickEdge(this, val);
    },
    contextmenu(val) {
      /*打开右键菜单*/
      if (val.dataType != "node") {
        return;
      }
      let div_diy = document.getElementById("contextmenuDiv_anal");
      div_diy.style.top = val.event.event.clientY + "px";
      div_diy.style.left = val.event.event.clientX + "px";
      this.menu_item = val;
      this.contextmenu_div = true;
    },
    closeContextmenu() {
      /*关闭右键菜单*/
      this.contextmenu_div = false;
    },
    showSFZ() {
      /*展示身份证的弹窗*/
      if (this.menu_item.dataType != "node") {
        return;
      }
      this.showSFZ_Dialog = true;
    },
    showRelation() {
      /*拓展关系*/
      if (this.menu_item.dataType != "node") {
        return;
      }
      //      			this.echart_analyse=false;
      apiShowRelation(this, this.menu_item);
    },
    cliclSearchImg(val) {
      /*搜索这个用户*/
      if (val.trim() == "") {
        return;
      }
      this.echart_analyse = false;
      apiSeachAnalyse(this, val.trim());
    },
    sure_submit(val) {
      /*根据输入的身份证，查找与当前身份证的信息*/
      //      			for(let i =0;i<val.length;i++){if(!this.testCode(val[i])){alert('第'+(i+1)+'条身份证请检查有无错误');return;}}
      this.showSFZ_Dialog = false;
      apiSearchSFZ(this, val, this.menu_item);
    },
    closeInfo(index) {
      this.personInfo.splice(index, 1);
    },
    superFile() {
      /*跳转到超级档案*/
      if (this.menu_item.data.zjhm == 0) {
        return;
      }
      gotoSuperFile(this, this.menu_item.data.zjhm.trim());
    },
    dragFunc(id, index) {
      /*拖拽*/
      //			    	id = 'info_div';
      var Drag = document.getElementById(String(id));
      Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX =
          ev.clientX - Drag.offsetLeft + 210 * index; /*解决偏移位置问题*/
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
          var ev = event || window.event;
          Drag.style.left = ev.clientX - disX + "px";
          Drag.style.top = ev.clientY - disY + "px";
          Drag.style.cursor = "move";
        };
      };
      Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
      };
    },
    getImageBlob(url, cb) {
      /*转换图片所处理*/
      var xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "blob";
      xhr.onload = function(ev) {
        if (ev.status == 200) {
          //				       imgResponse = this.response;
          return URL.createObjectURL(ev.response);
        }
      };
      xhr.send();
    },
    finish(i = 0) {
      /*递归去解决异步问题，我发现我很喜欢用递归*/
      //
      if (i == this.option2.series[0].data.length) {
        this.echarts_index = true;
        return;
      }
      let ImgObj = new Image();
      ImgObj.setAttribute("crossOrigin", "anonymous");
      //					if(!this.option2.series[0].data[i].hasOwnProperty('hasCheck')){/*hasCheck证明已经处理过了*/
      ImgObj.addEventListener("load", () => {
        /*有图片，去裁剪*/
        if (!this.option2.series[0].data[i].hasOwnProperty("hasCheck")) {
          this.radius = ImgObj.naturalWidth / 2;
          ImgObj.crossOrigin = "";
          this.diameter = this.radius * 2;
          this.canvas.width = this.diameter;
          this.canvas.height = this.diameter;
          this.contex.clearRect(0, 0, this.diameter, this.diameter);
          this.contex.save();
          this.contex.beginPath();
          this.contex.arc(
            this.radius,
            this.radius,
            this.radius,
            0,
            2 * Math.PI
          ); //画出圆
          this.contex.clip(); //裁剪上面的圆形
          this.contex.drawImage(
            ImgObj,
            0,
            0,
            this.diameter,
            this.diameter,
            0,
            0,
            this.diameter,
            this.diameter
          ); // 在刚刚裁剪的园上画图
          if (
            this.option2.series[0].data[i].hasOwnProperty("flag") &&
            this.option2.series[0].data[i].flag.hasOwnProperty("code") &&
            this.option2.series[0].data[i].flag.code != "0"
          ) {
            this.contex.drawImage(
              this.ImgObj2,
              0,
              0,
              this.diameter,
              this.diameter,
              this.radius * 1.2,
              this.radius * 0.2,
              this.diameter * 1.5,
              this.diameter * 1.5
            ); // 在刚刚裁剪的园上画星
          }
          this.contex.restore(); // 还原状态
          this.option2.series[0].data[i].symbol =
            "image://" + this.canvas.toDataURL("image/png", 1);
          this.option2.series[0].data[i].hasCheck = true;
        }
      });
      ImgObj.addEventListener("error", () => {
        /*无图片，读默认图片*/
        if (!this.option2.series[0].data[i].hasOwnProperty("hasCheck")) {
          /*因为跨域的问题，必须放在这里判断才有效*/
          this.option2.series[0].data[i].symbol = "image://" + this.moren_pic;
          if (
            this.option2.series[0].data[i].hasOwnProperty("flag") &&
            this.option2.series[0].data[i].flag.hasOwnProperty("code") &&
            this.option2.series[0].data[i].flag.code != "0"
          ) {
            let ImgObj_err = new Image();
            ImgObj_err.setAttribute("crossOrigin", "anonymous");
            ImgObj_err.src = this.moren_pic;
            this.radius = ImgObj_err.naturalWidth / 2;
            ImgObj_err.crossOrigin = "";
            this.diameter = this.radius * 2;
            this.canvas.width = this.diameter;
            this.canvas.height = this.diameter;
            this.contex.clearRect(0, 0, this.diameter, this.diameter);
            this.contex.save();
            this.contex.beginPath();
            this.contex.arc(
              this.radius,
              this.radius,
              this.radius,
              0,
              2 * Math.PI
            ); //画出圆
            this.contex.clip(); //裁剪上面的圆形
            this.contex.drawImage(
              ImgObj_err,
              0,
              0,
              this.diameter,
              this.diameter,
              0,
              0,
              this.diameter,
              this.diameter
            ); // 在刚刚裁剪的园上画图
            this.contex.drawImage(
              this.ImgObj2,
              0,
              0,
              this.diameter,
              this.diameter,
              this.radius * 1.2,
              this.radius * 0.2,
              this.diameter * 1.5,
              this.diameter * 1.5
            ); // 在刚刚裁剪的园上画星
            this.option2.series[0].data[i].symbol =
              "image://" + this.canvas.toDataURL("image/png", 1);
          }

          this.option2.series[0].data[i].hasCheck = true;
        }
      });

      //					}
      //					ImgObj.src = this.getImageBlob(this.option2.series[0].data[i].symbol.substring(8,this.option2.series[0].data[i].symbol.length));
      ImgObj.src =
        this.option2.series[0].data[i].userImg.substring(
          8,
          this.option2.series[0].data[i].symbol.length
        ) +
        "?timeStamp=" +
        new Date();

      //					ImgObj.setAttribute('crossOrigin', 'anonymous');
      this.finish(i + 1);
    },
    testCode(idCard) {
      /*验证身份证*/
      let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
      //如果通过该验证，说明身份证格式正确，但准确性还需计算
      if (regIdCard.test(idCard)) {
        if (idCard.length == 18) {
          var idCardWi = new Array(
            7,
            9,
            10,
            5,
            8,
            4,
            2,
            1,
            6,
            3,
            7,
            9,
            10,
            5,
            8,
            4,
            2
          ); //将前17位加权因子保存在数组里
          var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
          var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
          for (var i = 0; i < 17; i++) {
            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
          }
          var idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
          var idCardLast = idCard.substring(17); //得到最后一位身份证号码
          //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
          if (idCardMod == 2) {
            if (idCardLast == "X" || idCardLast == "x") {
              return true;
            } else {
              return false;
            }
          } else {
            //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
            if (idCardLast == idCardY[idCardMod]) {
              return true;
            } else {
              return false;
            }
          }
        }
      } else {
        return false;
      }
    },
    resetCanvas() {
      this.canvas = document.createElement("canvas");
      this.contex = this.canvas.getContext("2d");
      this.ImgObj = new Image();
      this.ImgObj2 = new Image();
      this.ImgObj2.src = this.star;
    }
  },
  created() {
    this.index_resize.height = window.innerHeight;
    this.index_resize.width = window.innerWidth;
    this.option = JSON.parse(JSON.stringify(this.option2));
    //      	;
    //
    this.resetCanvas(); /*初始化cancas对象*/
  },
  watch: {
    analyse_change(newVal, oldVal) {
      /*搜索人有变化*/
      this.cliclSearchImg(this.searchInput);
    }
    //      	res:{
    //      		 handler(newVal, oldVal){
    //
    //      		 	this.echart_analyse=false;
    //      		 	apiSeachAnalyse(this,this.searchInput,newVal)
    //      		 },
    //      		 deep:true
    //      	}
  }
};
</script>

<style>
.rela_analyse .contextmenu-div {
  position: absolute;
  min-width: 100px;
  background: #fff;
  z-index: 3000;
  top: 0;
  left: 0;
  border-radius: 4px;
  overflow: hidden;
  border: solid 1px #bbb6b6;
}
.rela_analyse .contextmenu-div ul {
  border-radius: 4px;
  overflow: hidden;
}
.rela_analyse .contextmenu-div li:hover {
  background: #bdbdbd;
  color: #fff;
}
.rela_analyse .contextmenu-div li {
  /*float: left;*/
  cursor: pointer;
  list-style: none;
  padding: 6px 20px;
  color: #1145de;
  font-size: 13px;
}
.rela_analyse .person_info_div {
  position: absolute;
  top: 130px;
  left: 120px;
  z-index: 11;
  height: 286px;
  max-width: 80%;
}
.rela_analyse .person_info_div_item {
  /*position: absolute;*/
  /*top: 220px;*/
  /*left: 120px;*/
  width: 210px;
  background: #f5f5f5;
  z-index: 3000;
  display: inline-block;
  position: relative;
  vertical-align: top;
  cursor: move !important;
  /* border: none; */
}
.rela_analyse .person_info_div_item p {
  margin: 10px;
  font-size: 12px;
}
.rela_analyse .person_info_div_item p.super {
  cursor: pointer;
}
.rela_analyse .person_info_div_item p img {
  width: 50%;
  text-align: center;
}
.rela_analyse .close_png {
  width: 20px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 1px;
}
.rela_analyse #echarts_analyse canvas {
  z-index: 10;
}
</style>